<template>
    <div class="background-fff">
        <ul class="service-box" v-if="serviceList.length>0">
            <li class="service-box-li clearfix" v-for="(val,index) in serviceList" :key="index" v-if="isMe==true"  @click="serviceDetail(index)">
                 <img class="fl" :src="$imgPath(val.serviceLogo)" alt="" v-if="val.onlineStatus == 0">
                 <img class="fl" :src="$imgPath(val.serviceLogoNone)" alt="" v-if="val.onlineStatus == 1">
                 <div class="fl service-conter clearfix">
                     <p class="service-conter-one">
                        <span class="fl game-name font-3">{{val.serviceName}}</span>
                        <span class="fl game-dw font-22 color-9">{{val.division}}</span>
                     </p>
                     <!-- <p class="jiedan-num color-9 font-24">接单{{val.num}}次</p>
                     <p class="one-hour font-22">
                        <em class="font-28 font-bold">{{val.price}}</em>钻石/小时                        
                     </p> -->
                 </div>
                 <div class="fr game-comment">
                     <van-rate class="game-xing" v-model="val.starNum" :size="12" :count="5" color="#D84E4D" void-color="#D84E4D" readonly="true"/>
                     <p class="yulan">
                        <img src="../../assets/image/center/icon_preview.png" alt="">
                        <em>预览</em>
                     </p>                
                 </div>                 
            </li>                      
            <li class="service-box-li clearfix" v-for="(val,index) in serviceList" :key="index" v-if="isMe==false">
                 <img class="fl" :src="$imgPath(val.serviceLogo)" alt="" v-if="val.onlineStatus == 0"  @click="serviceDetail(index)">
                 <img class="fl" :src="$imgPath(val.serviceLogoNone)" alt="" v-if="val.onlineStatus == 1"  @click="serviceDetail(index)">
                 <div class="fl service-conter clearfix">
                     <p class="service-conter-one">
                        <span class="fl game-name font-3">{{val.serviceName}}</span>
                        <span class="fl game-dw font-22 color-9">{{val.division}}</span>
                     </p>
                     <!-- <p class="jiedan-num color-9 font-24">接单{{val.num}}次</p>
                     <p class="one-hour font-22">
                        <em class="font-28 font-bold">{{val.price}}</em>钻石/小时                        
                     </p> -->
                 </div>
                 <div class="fr game-comment">
                     <van-rate class="game-xing" v-model="val.starNum" :size="12" :count="5" disabled-color="#D84E4D" void-color="#D84E4D" disabled/>
                     <!-- <p class="yuyin" v-if="val.isGif==true" @click="changeImg(index)">
                          <span class="audio-gif"><audio class="audio" :id="'audio'+index" :src="$imgPath(val.audioUrl)" :controls="val.controls"  autoplay="autoplay"></audio></span>
                          <em>{{val.audioTime}} ''</em>                           
                     </p> -->
                     <p class="yuyin" @click="changeImg(index)" v-if="val.audioUrl!=null">
                          <span class="audio-img"><audio class="audio" :id="'audio'+index" :src="$imgPath(val.audioUrl)" controls="true"></audio></span>
                          <em>{{val.audioTime}} ''</em>                           
                     </p>
                 </div>
            </li>                       
        </ul>
        <p v-else>暂无服务</p>   
    </div>
</template>
<script>
import store from '../../store'
import apiHttp from '../../api/index'
import { Tabbar, Toast } from 'vant'
export default {
    props:["isMe","userId","userobj"],
    data(){
        return{           
            serviceList:[],
            audioTimes:[],
            audioArr:[],
            tiemr:''           
        }
    },
    created(){
        this.myServerList();
    },
    methods:{
        myServerList(){
            let userId = ''
            if(this.userId){
                userId = this.userId
            }
            let params = {
                userId:userId
            }
            apiHttp.apiCenter.myService(userId,params,resp=>{        
                if(resp.code == 200){
                    for(var i=0;i<resp.data.length;i++){
                        this.audioArr.push(resp.data[i].audioUrl);
                        this.audioTimes.push(resp.data[i].audioTime);                       
                        //resp.data[i].audioUrl = ''
                        this.serviceList.push(resp.data[i])
                    } 
                    //this.serviceLists = this.serviceList
                }else{
                    Toast(resp.message)
                }                                             
                                       
            })
        },        
        //跳到服务详情即频道详情页面
        serviceDetail(index){ 
            let userType = 0; 
            if(this.isMe){
                userType = 0;
            }else{
                userType = 1;
            }       
            this.$router.push({
                name:"detail",
                params:{
                    userId:this.serviceList[index].userId,
                    serviceId:this.serviceList[index].serviceId,
                },
                query:{userType:userType}
            });           
        },      
        //切换语音动图
        changeImg(index){
            clearInterval(this.tiemr);
            this.serviceList[index].audioTime = this.audioTimes[index];                            
            for(var i in this.serviceList){
                if(i==index){
                       this.serviceList[i].audioUrl = `${this.audioArr[i]}`; 
                        let audio = document.getElementById('audio'+index)
                    if(audio.paused){                       
                        setTimeout(()=>{
                            audio.play()
                        },200) 
                        this.tiemr = setInterval(()=>{
                            if(this.serviceList[index].audioTime==0){
                                clearInterval(this.tiemr);
                                this.serviceList[index].audioTime = this.audioTimes[index]; 
                                this.serviceList[i].audioUrl = '';
                            }else{
                                if(this.serviceList[index].audioTime>0||this.serviceList[index].audioTime!=null||this.serviceList[index].audioTime!=''||this.serviceList[index].audioTime!=undefined){
                                    this.serviceList[index].audioTime--;
                                }                               
                            }
                            },1000);
                    }else{
                        setTimeout(()=>{
                            audio.pause()
                            clearInterval(this.tiemr);
                            this.serviceList[index].audioTime = this.audioTimes[index];
                         },200)                                                  
                    }
                }else{                  
                    if(this.serviceList[i].audioUrl==null){
                        this.serviceList[i].audioUrl = null
                    }else{
                        this.serviceList[i].audioUrl = ''
                    } 
                }
            }
           
        }
    }
}
</script>

<style scoped>
/* 服务语音 */
.yuyin{
    position: relative;
  width: 3.4rem;
  height: 1rem;
  margin-top: 0.6rem;
  border: 0.04rem solid #D84E4D;
  border-radius: 0.5rem;
  color: #D84E4D;
  box-sizing: border-box;
  padding: 0.08rem 0.1rem 0.09rem 0.4rem;
}
.yuyin>em{
    float: right;
    position: relative;
    right: 0.4rem;
    top: 0.1rem;
}
.audio-img {
  display: inline-block;
  width: 0.7rem;
  height: 0.56rem; 
  background: url('../../assets/image/center/icon_voice.png') no-repeat;
  background-size: cover;
  position: relative;
  top: 0.1rem;
}
.audio-gif{
  display: inline-block;
  width: 0.7rem;
  height: 0.56rem; 
  background: url('../../assets/image/detail/audio.gif') no-repeat;
  background-size: cover;
  position: relative;
  top: 0.06rem;
}
.audio{
    position: absolute;
    left: -0.42rem;
    top: -0.2rem;
    width: 3.4rem;
    height: 1rem;
    opacity: 0;
    z-index: -1;
}
.game-comment{
    padding-top: 0.36rem;
}
.yulan{
    margin-top: 0.6rem;
    text-align: right;
}
.yulan>img{
    width: 0.65rem !important;
    margin-right: 0.2rem;
    position: relative;
    top: 0.08rem;
}
.yulan>em{
    color: #999;
    font-size: 0.48rem;
    padding-right: 0.4rem;
}
.service-box{
    padding: .6rem 0 3rem 0;
}
.service-box-li{
   box-shadow: #d4cecd 0 0 .8rem;
   padding: .6rem 1rem;
   border-radius: .6rem;
   margin-bottom: .6rem;
}
.service-box-li img{
    width: 2.2rem;
    border-radius: 50%;
}
.service-conter{
    height: 2.6rem;
    padding-left: .6rem;
   /*  width: calc(100% - 2.8rem); */
}
.service-conter-one{
    height: 1.2rem;
}
.game-name{
    line-height: 1.2rem;
}
.game-dw{
    line-height: .84rem;
    height: .8rem;
    border:solid .04rem #999;
    margin-left: .4rem;
    padding: 0 .2rem;
    border-radius: .6rem;
    margin-top: .2rem;
    overflow: hidden;
}
.jiedan-num{
    height: .6rem;
    line-height: .6rem;
}
.one-hour{
    display: block;
    height: .8rem;
    line-height: .8rem;
    color: #D84E4D;
}

</style>
